let tabs = document.querySelectorAll('.introduction-experience a');
let border = document.querySelectorAll('.introduction-experience li');
let panels = document.querySelectorAll('.introduction-experience .panels div');
let projectImg = document.querySelector('.project-color-picture img');
let redHeartBox = document.querySelectorAll('.interaction-atlas-pic .redheart-box');
let messageContentBox = document.getElementById('firstBox');
let interactionMessage = document.querySelector('.interaction-message-content');
let inputWords = document.querySelector('.interaction-message-speaking .words-input');
let inputName = document.querySelector('.interaction-message-speaking .name-input');
let inputSubmit = document.querySelector('.interaction-message-speaking .words-submit');
let redHeart = [];
let flyHeart = [];
let usersComment=[];
let count=1;

function setTabHandler(tabPos) {
    tabs[tabPos].onclick = function() {
        for(i = 0; i < tabs.length; i++) {
            if(tabs[i].getAttribute('class'))
            {
                tabs[i].removeAttribute('class');
                border[i].removeAttribute('class');
                panels[i].removeAttribute('class');
                panels[i].style.color = 'rgba(255, 248, 220, 0)';
            }
            }
            tabs[tabPos].setAttribute('class', 'active');
            border[tabPos].setAttribute('class', 'active');
            panels[tabPos].setAttribute('class', 'active-panel');
            panels[tabPos].style.color = 'black';
        }
}
function set(numBox) {
    console.log(numBox);
    i = numBox.getAttribute('id').slice(3)-1;
    console.log(i);
        if(redHeart[i].getAttribute('class') === 'redHeart')
        {
            redHeart[i].setAttribute('class','redHeartChecked');
            flyHeart[i].setAttribute('class','flyHeartChecked');
        }
        else 
        {
            redHeart[i].setAttribute('class','redHeart');
            flyHeart[i].setAttribute('class','flyHeart');
        }
}
function checkCh(str){ 
    var patrn=/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi; 
    if(!patrn.exec(str)){ 
        return false; 
    }
    else{ 
        return true; 
    } 
}
function getUsersComment() {
    usersComment[0]=inputWords.value;
    usersComment[1]=inputName.value;
    if(checkCh(usersComment[0]) && usersComment[0].length>42)
    {
        alert('字数受限，请保证内容在42字以内。');
    }else if(!checkCh(usersComment[0]) && usersComment[0].length>91){
        alert('Please ensure that the content is within 91 characters.');
    }else if (usersComment[0].length ===0){
        alert('输入内容不能为空！');
    }else if(usersComment[1].length === 0){
        alert('姓名不能为空！');
    }else if (checkCh(usersComment[1]) && usersComment[1].length>5){
        alert('姓名长度超出范围！');
    }else if (!checkCh(usersComment[1]) && usersComment[1].length>9){
        alert('Name length out of range !');
    }else {
        var newInteractionMessage = document.createElement('div');
        var newPersonalInformation = document.createElement('div');
        var newHeaderPic = document.createElement('div');
        var newComment = document.createElement('p');
        var newPersonalName = document.createElement('p');
        var newPersonalWords = document.createElement('div');
        var newPersonalWordsContent = document.createElement('p');
        newInteractionMessage.setAttribute('class','interaction-message-content-box');
        if(count%2 ===0 ){
            newPersonalInformation.setAttribute('class','personalInformation-odd');
        }else {
            newPersonalInformation.setAttribute('class','personalInformation');
        }
        newHeaderPic.setAttribute('class','header-pic');
        newPersonalName.setAttribute('class','personalName');
        newPersonalWords.setAttribute('class','personal-words');
        newComment.textContent = usersComment[1].slice(0,1);
        newPersonalName.textContent = usersComment[1];
        newPersonalWordsContent.textContent = usersComment[0];
        newHeaderPic.appendChild(newComment);
        newPersonalInformation.appendChild(newHeaderPic);
        newPersonalInformation.appendChild(newPersonalName);
        newPersonalWords.appendChild(newPersonalWordsContent);
        if(newPersonalInformation.getAttribute('class') === 'personalInformation-odd'){
            newInteractionMessage.appendChild(newPersonalInformation);
            newInteractionMessage.appendChild(newPersonalWords);
        }else {
            newInteractionMessage.appendChild(newPersonalWords);
            newInteractionMessage.appendChild(newPersonalInformation);
        }
        if(!messageContentBox.getAttribute('id')) {
            messageContentBox = document.getElementById('firstBox');
        }
        interactionMessage.insertBefore(newInteractionMessage,messageContentBox);
        messageContentBox.removeAttribute('id');
        newInteractionMessage.setAttribute('id','firstBox');
        count++;
    }
    inputWords.value='';
    inputName.value='';

}
panels[0].style.color = 'black';
for(let i = 0; i < tabs.length; i++) {
  setTabHandler(i);
}
for(i=0; i<8; i++) {
    var j=i+1;
    redHeart.push(document.getElementById('redheart'+j));
    flyHeart.push(document.getElementById('flyheart'+j));
}
for(var i=0;i<8;i++) {
    redHeartBox[i].addEventListener('click',function() {
    set(this)});
}
inputSubmit.addEventListener('click',getUsersComment);




    